/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<!--
 * @Author: zhb
 * @Date: 2020-08-28
 * @Description: 聚合分桶算子表单配置
 -->
<template>
    <div class="custom_config_form">
         <sf-form ref="form"
            :label-width="80">
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>时间字段</lang>
                </sf-fieldlabel>
                <sf-select v-model="formData.timeColumn"
                    :default-width="fieldWidth"
                    :allow-search="true"
                    :allow-blank="false"
                    :options="timeFieldList"/>
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>时间区间</lang>
                </sf-fieldlabel>
                <el-date-picker
                    v-model="dateTime"
                    size="mini"
                    class="add-condition__date-picker"
                    type="datetimerange"
                    :clearable="false"
                    align="center"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="getRange"
                     />
            </sf-form-item>
            <sf-form-item class="form-item--first">
                    <sf-fieldlabel>
                        <lang>时间间隔</lang>
                    </sf-fieldlabel>
                    <sf-numberfield v-model="formData.timeInterval"
                        :default-width="112"
                        :allow-blank="false"
                        :allow-decimals="false"
                        :placeholder="_('请输入整数')"
                        :min-value="1"
                    />
                    <sf-select v-model="formData.timeUnit"
                        :default-width="194"
                        :allow-search="true"
                        :allow-blank="false"
                        :options="timeUnitList"/>
            </sf-form-item>
            <sf-form-item class="form-item--first">
                    <sf-fieldlabel>
                        <lang>分组字段</lang>
                    </sf-fieldlabel>
                    <sf-select v-model="formData.groupByKey"
                        :default-width="fieldWidth"
                        :allow-search="true"
                        :allow-blank="false"
                        :options="fieldList"/>
            </sf-form-item>
            <sf-form-item class="form-item--first">
                    <sf-fieldlabel>
                        <lang>聚合统计字段</lang>
                    </sf-fieldlabel>
                    <sf-select v-model="formData.aggregationColumn"
                        :default-width="fieldWidth"
                        :allow-search="true"
                        :allow-blank="false"
                        :options="fieldList"/>
            </sf-form-item>
            <sf-form-item class="form-item--first">
                    <sf-fieldlabel>
                        <lang>聚合操作类型</lang>
                    </sf-fieldlabel>
                    <sf-select v-model="formData.aggregationOp"
                        :default-width="fieldWidth"
                        :allow-search="true"
                        :allow-blank="false"
                        :options="oprList"/>
            </sf-form-item>
        </sf-form>
        <div class="add-operate__btn">
            <sf-button-primary class="btn-primary m-r10"
                                @click.native="_submit">
                <lang>确定</lang>
            </sf-button-primary>
            <sf-button @click.native="_cancel">
                <lang>取消</lang>
            </sf-button>
        </div>
    </div>
</template>

<script lang=ts>
import { Component, Vue, Ref } from 'vue-property-decorator';
import {encodeDate} from 'src/util/format';


const DEFAULT_WIDTH = 310;

import moment from 'moment';
import { SfForm } from '@sxf/sf-vue-component';

@Component({
    name: 'aggForm'
})
export default class CustomConfigForm extends Vue {

    @Ref() form!: SfForm

    formData = {}
    timeUnitList = [{
        label:_('年'),
        value:'year'
    }, {
        label:_('月'),
        value:'month'
    }, {
        label:_('日'),
        value:'day'
    }, {
        label:_('时'),
        value:'hour'
    }, {
        label:_('分'),
        value:'minute'
    }, {
        label:_('秒'),
        value:'second'
    }]
    oprList = [{
        label:_('sum'),
        value:'sum'
    }, {
        label:_('max'),
        value:'max'
    }, {
        label:_('min'),
        value:'min'
    }]
    fieldWidth =  DEFAULT_WIDTH
    defaultTime = ['00:00:00', '23:59:59']
    // TODO: REMOVE ANY
    dateTime: string[] = []
    // TODO: REMOVE ANY
    fieldList: string[] = []
    // TODO: REMOVE ANY
    timeFieldList: string[] = []

    // TODO: REMOVE ANY
    getRange (range: SafeAny) {
        this.dateTime = [encodeDate(range[0]), encodeDate(range[1])];
        // @ts-ignore
        this.formData.startDate = moment(range[0]).valueOf();
        // @ts-ignore
        this.formData.endDate = moment(range[1]).valueOf();
    }

    // 表格时间格式化
    // TODO: REMOVE ANY
    dateTimeFormatter (value: SafeAny) {
        return encodeDate(Number(value));
    }
    reset () {
        this.formData = {};
        this.clearInvalidMsg();
    }
    clearInvalidMsg () {
        this.$nextTick(() => {
            this.form.clearInvalid();
        });
    }
    getJsonValue () {
        return this.formData;
    }

    // TODO: REMOVE ANY
    setJsonValue (data: SafeAny) {
        this.formData = Object.assign(this.formData, data);

        // 需要情况报错
        this.clearInvalidMsg();
    }

    _submit () {
        this.$emit('operate-submit', this.formData);
    }
    _cancel () {
        this.$emit('operate-cancel');
    }
    isValid () {
        return this.form.isValid();
    }
    clearInvalid () {
        this.$nextTick(() => {
            this.form.clearInvalid();
        });
    }
};
</script>

<style lang="less">
    .custom_config_form{
        .add-condition__date-picker {
            width: 310px;
            height: 30px;
            border-radius:0;
            &.allowblank-error {
                border: 1px solid #f55151;
            }
            .el-range-input {
                width: 134px;
            }
            .el-range-separator {
                width: 24px;
            }
            .el-range__close-icon {
                display: none;
            }
        }
        .sfv-fieldlabel{
            width: 86px !important;
        }

    }
</style>

